<template>
  <section class="edit">
    <group>
      <x-input :placeholder="$t('phone')" is-type="china-mobile" v-model="mobile">
        <img slot="restricted-label" style="display:inline-block;vertical-align:middle;width:0.28rem;height:0.4rem;" src="../../assets/img/phone.png" width="24" height="24">|||||
      </x-input>
      <x-input :placeholder="$t('code')" class="weui-vcode" v-model="captcha">
        <img slot="restricted-label" style="display:inline-block;vertical-align:middle;width:0.28rem;height:0.4rem;" src="../../assets/img/verifyCode.png" width="24" height="24">
        <x-button slot="right" type="primary" mini @click.native="sendCode" >{{sen_code}}</x-button>
      </x-input>
      <x-input :placeholder="$t('pwd')" v-model="new_password" type="password">
        <img slot="restricted-label" style="display:inline-block;vertical-align:middle;width:0.28rem;height:0.4rem;" src="../../assets/img/psw.png" width="24" height="24">|||||
      </x-input>
      <x-input :placeholder="$t('confirm pwd')"  v-model="verify_password" type="password">
        <img slot="restricted-label" style="display:inline-block;vertical-align:middle;width:0.28rem;height:0.4rem;" src="../../assets/img/psw.png" width="24" height="24">|||||
      </x-input>
    </group>
    <div class="btn-box">
      <x-button type="primary"  @click.native ="change">{{$t('confirm')}}</x-button>
    </div>

  </section>
</template>

<i18n>
  title.editpwd:
    en: Edit Password
    zh-CN: 修改密码
  password:
    en: Password
    zh-CN: 请输入密码
  confirm pwd:
    en: Confirm Password
    zh-CN: 请输入确认密码
  sen_code:
    en: Sen Code
    zh-CN: 发送验证码
  resend:
    en: s resend
    zh-CN: s后重新发送
  resend code:
    en: resend code
    zh-CN: 重新发送验证码
</i18n>

<script>
  import {XInput, Group, XButton} from 'vux'

  export default {
    name: 'editPwd',
    components: {
      XInput,
      Group,
      XButton
    },
    data () {
      return {
        buttonColor: ['#1D62F0', '#19D5FD'],
        mobile: '',
        captcha: '',
        new_password: '',
        verify_password: '',
        phone: '',
        code: '',
        pwd: '',
        confirmpwd: '',
        verify: '',
        event: 'changepwd',
        totalTime: 60,
        canClick: true,
        sen_code: this.$t('sen_code'),
        resend_code: this.$t('resend code'),
        resend: this.$t('resend')
      }
    },
    created () {
      this.init()
    },
    methods: {
      // 页面加载获取验证码验证之前参数
      init () {
        let vue = this
        vue.post({
          url: 'api/sms/before_send',
          success: function (data) {
            // console.log(data.data.sms_verify)
            vue.verify = data.data.sms_verify
          }
        })
      },
      // 点击发送验证码倒计时
      sendCode () {
        let vue = this
        vue.post({
          url: '/api/sms/send',
          params: {
            mobile: vue.mobile,
            event: vue.event,
            sms_verify: vue.verify
          },
          success: function (data) {
            if (data.code === 1) {
              if (!vue.canClick) return
              vue.canClick = false
              vue.sen_code = vue.totalTime + vue.resend
              let clock = window.setInterval(() => {
                vue.totalTime--
                vue.sen_code = vue.totalTime + vue.resend
                if (vue.totalTime < 0) {
                  window.clearInterval(clock)
                  vue.sen_code = vue.resend_code
                  vue.totalTime = 60
                  vue.canClick = true
                  vue.init()
                }
              }, 1000)
              vue.$vux.toast.text(data.msg)
            } else {
              vue.$vux.toast.text(data.msg)
              vue.init()
            }
            console.log(data)
          }
        })
      },
      change () {
        let vue = this
        vue.post({
          url: '/api/account/change_password',
          params: {
            token: localStorage.token,
            mobile: vue.mobile,
            captcha: vue.captcha,
            new_password: vue.new_password,
            verify_password: vue.verify_password
          },
          success: function (data) {
            if (data.code === 0) {
              vue.$vux.toast.text(data.msg)
            } else {
              vue.$vux.toast.text(data.msg)
              vue.$router.back(-1)
            }
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .edit {
    height: 100%;
    background-color: #fff;
    .weui-btn_primary{
      background: #fff;
      color: #57a94f;
      border: 1px solid #57a94f;
    }
    .btn-box{
      padding: 0.3rem;
      button{
        background: #179b16;
        color: #fff;
        border: 1px solid #57a94f;
        padding: 0 8px;
        border-radius: 3px;
      }
    }
    .weui-cell{
      padding-top: 20px;
    }
    .weui-cell__hd{
      img{
        width: 0.28rem;
        height: 0.35rem;
      }
    }

  }
</style>
